window.onload = function() {
	/*全局变量的声明*/
	var index = 0,/*当前显示图片的索引，默认值为0*/
		main = getById("main"),
		prev = getById("prev"),/*上一张按钮*/
		next = getById("next"),/*下一张按钮*/
		allPics = getById("banner").getElementsByTagName("span"),
		size = allPics.length,
		dots = getById("slidePoint").getElementsByTagName("span"),
		timer = null;
		

	// 上一张按钮
	addHandler(prev,"click",function(){
		index--;
		if(index<0) {
			index = size-1;
		}
		changeImg()
	})

	// 下一张按钮
	addHandler(next,"click",function(){
		index++;
		if(index>=size) {
			index = 0;
		}
		changeImg()
	})

	// 点击圆点切换图片
	for(var j =0;j<size;j++) {
		dots[j].setAttribute("data-id",j);
		addHandler(dots[j],"click",function(){
			index = this.getAttribute("data-id")
			changeImg()
		})
	}


	// 轮播图
	startAutoPlay();
	// 鼠标划入停止轮播
	addHandler(main,"mouseover",stopAutoPlay);
	// 鼠标离开，开始轮播
	addHandler(main,"mouseout",startAutoPlay);

	// 封装getElementById
	function getById(id) {
		return typeof id === "string" ? document.getElementById(id) : id;
	}

	/**
	 * 封装通用事件方法（兼容IE）
	 * 绑定事件的DOM元素：element
	 * 事件名：type
	 * 事件处理程序：handler
	 */
	function addHandler(element,type,handler) {
		/**
		 * 支持addEventListener
		 * 非IE浏览器
		 */
		if(element.addEventListener) {
			element.addEventListener(type,handler,true);
		}else if(element.attachEvent) {
			// 支持DOM2级的IE浏览器
			element.attachEvent("on"+type,handler);
		}else {
			// 不支持DOM2级的IE浏览器
			element["on"+type] = handler;
		}
	}

	// 切换图片
	function changeImg() {
		for(var i =0;i<size;i++) {
			allPics[i].style.display = "none";
			dots[i].className ="";
		}
		allPics[index].style.display = "block";
		dots[index].className = "point-active"
	}

	// 定时器
	function startAutoPlay() {
		timer = setInterval(function(){
			index++;
			if(index>=size) {
				index = 0;
			}
			changeImg();
		},3000)
	}

	// 清除定时器
	function stopAutoPlay() {
		if(timer) {
			clearInterval(timer);
		}
	}
}


